<template>

  <div class="map-container">

    <!--药店查询-->
    <div class="shop-query">

      <div>
        <button class="year-btn">类别</button>
        <el-select v-model="typeValue" placeholder="请选择类别" class="year-select" @change="typeChange(typeValue)">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <div class="year-box">
        <button class="year-btn">年份</button>
        <el-select v-model="yearValue" placeholder="请选择年份" class="year-select">
          <el-option
            v-for="item in yearOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <div class="year-box">
        <button class="year-btn">地点</button>
        <el-input v-model="placeValue" placeholder="请输入关键字：(选定后搜索)" class="year-select" id="searchPlace"></el-input>
      </div>

      <div class="list-input">

        <el-row class="demo-autocomplete">
          <el-col :span="12">
            <el-autocomplete
              id="keyword"
              v-model="selectValue"
              class="inline-input query-input"
              :fetch-suggestions="querySearch"
              placeholder="请输入药店名称"
              :clearable="true"
              @select="handleSelect"
              @focus.stop="focusSelect"
              @keyup.enter.native="queryShop"
            />
          </el-col>
        </el-row>
        <button id="queryShop" class="query-shop" @click="queryShop">查询</button>

      </div>

      <el-switch
        v-model="isHotPopu"
        @change="showHeatMap"
        inactive-text="热力图">
      </el-switch>


    </div>

    <div id="map-container"/>

    <!-- 图例 -->
    <el-button
      type="primary"
      title="重置"
      class="refresh-btn"
      icon="el-icon-refresh"
      circle
      @click="refreshFun"
    />
    <div class="input-card bottom-example">
      <div id="map-features">
        <div class="input-item">
          <input type="checkbox" name="mapStyle" value="bg" checked class="mapStyle" @click.stop="setMapFeatures">
          <span class="input-text">区域面</span>
        </div>
        <div class="input-item">
          <input type="checkbox" name="mapStyle" value="road" checked class="mapStyle" @click.stop="setMapFeatures">
          <span class="input-text">道路</span>
        </div>
		<div class="input-item">
          <input type="checkbox" name="mapStyle" value="building" checked class="mapStyle" @click.stop="setMapFeatures">
          <span class="input-text">建筑物</span>
        </div>
        <div class="input-item">
          <input type="checkbox" name="mapStyle" value="point" checked class="mapStyle" @click.stop="setMapFeatures">
          <span class="input-text">标注</span>
        </div>
      </div>
      <div class="exampleList">
        <div>
          <img src="../../assets/img/map/mass2.png" style="width: 12px;height: 12px" alt="">
          <span>药店<i class="exampleList-num">{{ type0 }}座</i></span>
        </div>
        <div>
          <img src="../../assets/img/map/mass1.png" style="width: 12px;height: 12px" alt="">
          <span>三甲医院<i class="exampleList-num">{{ type1 }}座</i></span>
        </div>
        <div>
          <img src="../../assets/img/map/mass0.png" style="width: 12px;height: 12px" alt="">
          <span>普通医疗机构<i class="exampleList-num">{{ type2 }}座</i></span>
        </div>
      </div>
    </div>

    <!--下属行政区查询-->
    <div class="input-card area-card">
      <h4>下属行政区查询</h4>
      <div class="input-item">
        <div class="input-item-prepend"><span class="input-item-text">区县</span></div>
        <select id="district" v-model="cityid" style="width:100px" @change="searchArea(cityid)">
          <option value="">所有区县</option>
          // eslint-disable-next-line vue/require-v-for-key
          <option v-for="(item,key) in cityData" :key="key" :value="item.adcode">{{ item.name }}</option>
        </select>
      </div>
      <div class="input-item">
        <div class="input-item-prepend"><span class="input-item-text">街道</span></div>
        <select id="street" v-model="streetname" style="width:100px" @change="searchStreet(streetname)">
          <option value="">请选择</option>
          <option v-for="(item,key) in streetData" :key="key" :value="item.name">{{ item.name }}</option>
        </select>
      </div>
    </div>

    <!--统计信息-->
    <div class="street-info-wrap">
      <el-row :gutter="20">
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <p class="info-title">常驻人口</p>
            <p class="info-num">{{ Perpopu }}人</p>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <p class="info-title">流动人口</p>
            <p class="info-num">{{ Floatpopu }}人</p>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <p class="info-title">药店数量</p>
            <p class="info-num">{{ type0 }}座</p>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <p class="info-title">三甲医院数量</p>
            <p class="info-num">{{ type1 }}座</p>
          </div>
        </el-col>
        <el-col :span="20">
          <div class="grid-content bg-purple">
            <p class="info-title">普通医疗机构</p>
            <p class="info-num">{{ type2 }}座</p>
          </div>
        </el-col>
      </el-row>
    </div>

    <!--药店详细信息窗口-->
    <el-dialog :title="getPagesInfo.name+' - 详情'" :visible.sync="outerVisible" width="80%" top="10vh">
      <storeDetail :get-pages-info="getPagesInfo"/>
    </el-dialog>

  </div>

</template>

<script>
  import AMap from 'AMap'
  import axios from 'axios'

  import storeDetail from '@/views/store/storeDetail.vue'

  // import AMapUI from 'AMapUI'

  export default {
    components: {
      'storeDetail': storeDetail // 变成 组件 storeDetail
    },


    data: function () {
      return {
        mapObj: null,
        boundary: null,//边界obj
        isHotPopu: false,//是否是热力图
        heatmap: null,//热力图obj
        heatmapData: null,//热力图数据
        polygonLine: null,//边界线
        infoWindow: null,
        labels: [], // label集合
        circle: null,
        circleEditor: null,
        markers: [],
        mass: null, // 海量点
        massMarker: null, // 海量点上的名称
        resData: null, // 药店等机构所有数据
        houseData: null, // 小区人口所有数据
        Perpopu: 0, // 常驻人口
        Floatpopu: 0, // 流动人口
        selectValue: '', // 查询的药店或机构的值
        type0: 0, // 药店数量
        type1: 0, // 三甲医院数量
        type2: 0, // 普通医疗机构数量
        type0Data: [], // 药店
        type1Data: [], // 三甲医院
        type2Data: [], // 普通医疗机构
        yearOptions: [], // 年份
        yearValue: '',
        typeOptions: [{value: 'all', label: '所有'}, {value: '0', label: '药店'}, {value: '1', label: '三甲医院'}, {
          value: '2',
          label: '普通医疗机构'
        }, {value: '3', label: '已取消机构'}],
        typeValue: 'all',
        outerVisible: false, // 是否显示药店详情
        getPagesInfo: {}, // 传递的详情数据
        cityData: [], // 区域数据
        cityid: '', // 城市编码
        streetData: [], // 街道数据
        streetname: '', // 街道名称
        areaMarker: null,
        placeValue: "",// 地点名称

      }
    },

    computed: {
      centerPos: function () {
        return this.$store.state.mapCenterPos
      }
    },

    watch: {
      // a computed getter
      // mapStyle: function () {
      //   this.mapObj.setMapStyle(this.mapStyle)
      //   return
      // }
    },

    destroyed() {
      // 销毁的时候
    },

    mounted() {
      console.log('mounted.....')
      this.initMap()
      this.yearFun()
      this.areaDataFun()
      this.searchPlace()

    },

    methods: {

      initMap() {
        var _this = this
        _this.mapObj = new AMap.Map('map-container', {
          zoom: 9,
          center: [121.583043, 29.861907],
          mapStyle: 'amap://styles/blue'// 蓝色主题色
        })
        _this.infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -10)})

        if (_this.mapObj) {
          _this.completeEventHandler()
        } else {
          AMap.event.addListener(_this.mapObj, 'complete', _this.completeEventHandler)
        }
      },

      /**
       * 地图构造完成后
       */
      completeEventHandler() {
        var _this = this
        console.log('completeEventHandler')

        // map点击事件
        _this.mapObj.on('click', function (e) {
          _this.infoWindow.close()
          _this.addCircleFun([e.lnglat.Q, e.lnglat.P]);

        })


        _this.placeArea('宁波市');


        // 图层切换，地图缩放，路况（路网等功能）
        _this.mapObj.plugin(['AMap.ToolBar', 'AMap.MapType'], function () {
          // _this.mapObj.addControl(new AMap.ToolBar())
          _this.mapObj.addControl(new AMap.MapType({showTraffic: false, showRoad: false}))
        })

        // 设置药店、医疗结构点位 -- 海量点
        axios.get('../static/json/map.json').then((res) => {
          // 用axios的方法引入地址
          if (res.status == 200) {
            res.data.forEach(item => {
              item.lnglat = item.pos
              item.style = item.type
              item.value = item.name
              if (item.type == 0) {
                item.icon = 'https://a.amap.com/jsapi_demos/static/images/mass2.png'
              } else if (item.type == 1) {
                item.icon = 'https://a.amap.com/jsapi_demos/static/images/mass1.png'
              } else if (item.type == 2) {
                item.icon = 'https://a.amap.com/jsapi_demos/static/images/mass0.png'
              }
            })

            _this.resData = res.data

            // 统计个数
            _this.countNum(res.data)

            _this.showMarker(res.data)
          }
        })

        // 热力图数据
        axios.get('../static/json/hotpopu.json').then((res) => {
          // 用axios的方法引入地址
          if (res.status == 200) {

            _this.heatmapData = res.data;

          }
        });

        // 流动人口数据
        axios.get('../static/json/popu.json').then((res) => {
          // 用axios的方法引入地址
          if (res.status == 200) {

            _this.Perpopu = 0;
            _this.Floatpopu = 0;

            _this.houseData = res.data;
            _this.houseData.forEach(function (item, index) {
              _this.Perpopu += item.Perpopu;
              _this.Floatpopu += item.Floatpopu;
            })

          }
        });

        console.log('completeEventHandler end')
      },

      //区域选择
      placeArea(stringName) {
        var _this = this;
        // 框定宁波市地区

        _this.boundary = new AMap.DistrictSearch({
          extensions: 'all',
          subdistrict: 0
        }).search(stringName, function (status, result) {
          // 外多边形坐标数组和内多边形坐标数组
          var outer = [
            new AMap.LngLat(-360, 90, true),
            new AMap.LngLat(-360, -90, true),
            new AMap.LngLat(360, -90, true),
            new AMap.LngLat(360, 90, true)
          ]
          var holes = result.districtList[0].boundaries

          var pathArray = [
            outer
          ]
          pathArray.push.apply(pathArray, holes)

          if (_this.polygonLine != null) {
            _this.mapObj.remove(_this.polygonLine)
          }

          _this.polygonLine = new AMap.Polygon({
            pathL: pathArray,
            // 线条颜色，使用16进制颜色代码赋值。默认值为#006600
            strokeColor: 'rgb(20,164,173)',
            strokeWeight: 4,
            // 轮廓线透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            strokeOpacity: 0.5,
            // 多边形填充颜色，使用16进制颜色代码赋值，如：#FFAA00
            fillColor: 'rgba(0,0,0,0.7)',
            // 多边形填充透明度，取值范围[0,1]，0表示完全透明，1表示不透明。默认为0.9
            fillOpacity: 1,
            // 轮廓线样式，实线:solid，虚线:dashed
            strokeStyle: 'solid',
            /* 勾勒形状轮廓的虚线和间隙的样式，此属性在strokeStyle 为dashed 时有效， 此属性在
              ie9+浏览器有效 取值：
              实线：[0,0,0]
              虚线：[10,10] ，[10,10] 表示10个像素的实线和10个像素的空白（如此反复）组成的虚线
              点画线：[10,2,10]， [10,2,10] 表示10个像素的实线和2个像素的空白 + 10个像素的实
              线和10个像素的空白 （如此反复）组成的虚线*/
            strokeDasharray: [10, 2, 10]
          })
          _this.polygonLine.setPath(pathArray);

          _this.mapObj.add(_this.polygonLine);

          //层级自动化
          // _this.mapObj.setFeatures(_this.polygonLine);

          if (stringName == '宁波市') {


            _this.showMarker(_this.resData);
            _this.countNum(_this.resData);

            _this.mapObj.setZoomAndCenter(9, [121.583043, 29.861907]);

          } else {

            //获取某个区内的药店数量
            var areaResData = _this.resData.filter(function (item) {
              return item.adcode == _this.cityid
            })
            _this.showMarker(areaResData);
            _this.countNum(areaResData);

            //获取中心店
            var areaData = _this.cityData.filter(function (city) {
              return city.name == stringName
            });

            var centerArr = areaData[0].center.split(',');

            _this.mapObj.setZoomAndCenter(10, centerArr);

          }


        })
      },

      // 海量点 不兼容 setFitView ,所以使用marker方式
      showMass(data) {
        var _this = this
        _this.mapObj.remove(_this.mass)
        _this.mapObj.remove(_this.massMarker)

        // 海量点 -- 样式
        var style = [
          {
            url: 'https://a.amap.com/jsapi_demos/static/images/mass0.png',
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: 'https://a.amap.com/jsapi_demos/static/images/mass1.png',
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          },
          {
            url: 'https://a.amap.com/jsapi_demos/static/images/mass2.png',
            anchor: new AMap.Pixel(6, 6),
            size: new AMap.Size(11, 11)
          }
        ]

        _this.mass = new AMap.MassMarks(data, {
          opacity: 0.8,
          zIndex: 111,
          cursor: 'pointer',
          style: style
        })

        _this.massMarker = new AMap.Marker({content: ' ', map: _this.mapObj})

        _this.mass.on('mouseover', function (e) {
          _this.massMarker.setPosition(e.data.lnglat)
          _this.massMarker.setLabel({content: e.data.name})
        })
        // 标记点 点击事件
        _this.mass.on('click', function (e) {
          _this.mapObj.setZoomAndCenter(15, [e.data.lnglat.Q, e.data.lnglat.P]) // 设置地图中心点
        })
        _this.mass.setMap(_this.mapObj)
        _this.mapObj.setFitView([_this.mass])
      },
      // 多个标记点
      showMarker(data) {
        var _this = this

        // 清空信息窗口和之前加载的点位
        _this.infoWindow.close()
        _this.mapObj.remove(_this.markers)
        _this.markers = []// 先清空点位数组

        if (_this.areaMarker != null) {
          _this.mapObj.remove(_this.areaMarker)// 清楚区域选择的标记
        }

        data.forEach(function (item) {
          var marker = new AMap.Marker({
            map: _this.mapObj,
            content: `<div><img width="12" height="12" src="${item.icon}" alt=""></div>`,
            position: item.pos,
            offset: new AMap.Pixel(-6, -6)
          })
          // 信息窗口
          var str = `<div class="window-style-open">
                      <div class="box-img"><img src="${item.src}" alt=""></div>
                      <div class="box-info">
                       <div class="info-title"><span>地址: </span>${item.address}</div>
                       <div class="info-title"><span>电话: </span>${item.tel}</div>
                       <div class="info-title"><a id="storeDetail" data-id="${item.id}">查看详情</a></div>
                      </div>
                   </div> `
          marker.content = str;

          // 当点位小于3个时，添加文字标识
          if (data.length < 3) {
            // 名字标识
            marker.setLabel({
              offset: new AMap.Pixel(12, -5), // 设置文本标注偏移量
              content: "<div class='amap-marker-label'><div class='title'>" + item.name + '</div></div>', // 设置文本标注内容
              direction: 'bottom-right' // 设置文本标注方位
            })
          } else {
            marker.on('mouseover', function (e) {
              _this.markers.forEach(function (item2) {
                item2.setLabel(null)
              })

              // 名字标识
              marker.setLabel({
                offset: new AMap.Pixel(12, -5), // 设置文本标注偏移量
                content: "<div class='amap-marker-label'><div class='title'>" + item.name + '</div></div>', // 设置文本标注内容
                direction: 'bottom-right' // 设置文本标注方位
              })
            })
          }

          // 点位集合
          _this.markers.push(marker)

          // 点位点击事件
          marker.on('click', function (e) {
            // 显示信息窗口
            _this.infoWindow.setContent(e.target.content)
            _this.infoWindow.open(_this.mapObj, e.target.getPosition())
            setTimeout(function () {
              _this.openWindowEvent()
            }, 300)

            // 添加圆
            _this.addCircleFun(e.target.getPosition());


          })
        })

        _this.mapObj.add(_this.markers)

        // 当只有一条数据时默认 打开信息窗口
        if (data.length == 1) {
          _this.infoWindow.setContent(_this.markers[0].content)
          _this.infoWindow.open(_this.mapObj, data[0].pos)
          setTimeout(function () {
            _this.openWindowEvent()
          }, 300)

          // 添加圆
          _this.addCircleFun(data[0].pos)
        } else {
          if (_this.circle != null) {
            _this.mapObj.remove(_this.circle)
          }
          if (_this.circleEditor != null) {
            _this.circleEditor.close()
          }
          _this.mapObj.setFitView(_this.markers)
        }
      },
      // 添加圆
      addCircleFun(arr) {
        var _this = this
        // 地图上移除所有圆
        if (_this.circle != null) {
          _this.mapObj.remove(_this.circle)
        }

        // 地图上添加圆
        _this.circle = new AMap.Circle({
          center: arr,
          radius: 500, // 半径
          borderWeight: 3,
          strokeColor: '#fff',
          strokeWeight: 6,
          strokeStyle: 'dashed',
          strokeDasharray: [10, 10],
          // 线样式还支持 'dashed'
          fillColor: '#eee',
          fillOpacity: 0.4, // 填充透明度
          zIndex: 10,
          cursor: 'pointer'
        })
        // 地图上添加圆
        _this.circle.setMap(_this.mapObj)
        // 缩放地图到合适的视野级别
        _this.mapObj.setFitView([_this.circle])

        // 圆编辑模式
        if (_this.circleEditor != null) {
          _this.circleEditor.close()
        }
        _this.circleEditor = new AMap.CircleEditor(_this.mapObj, _this.circle)
        _this.circleEditor.open()


        _this.circleCountNumFun(arr, 500);

        //圆 移动和 切换大小事件
        _this.circleEditor.on('move', function (e) {
          var radius = e.target.Je.radius;
          var pos = [e.target.Je.center.Q, e.target.Je.center.P];
          _this.circleCountNumFun(pos, radius);
        });

        _this.circleEditor.on('adjust', function (e) {
          var radius = e.target.Je.radius;
          var pos = [e.target.Je.center.Q, e.target.Je.center.P];
          _this.circleCountNumFun(pos, radius);
        });

        // _this.circleEditor.on('end', function (e) {
        // console.log('触发事件： end')
        // })

      },

      editOpen() {
        this.circleEditor.open() // 打开圆形编辑器
      },

      editClose() {
        this.circleEditor.close() // 打开圆形编辑器
      },

      onSearchResult(pois) {

      },

      // input联想查询
      querySearch(queryString, cb) {
        var _this = this
        var resData = _this.resData
        var results = queryString ? resData.filter(_this.createFilter(queryString)) : resData
        // 调用 callback 返回建议列表的数据
        cb(results)
      },
      createFilter(queryString) {
        return (resData) => {
          return (resData.value.toLowerCase().indexOf(queryString.toLowerCase()) > -1)
        }
      },
      // 点击选项
      handleSelect(item) {
        console.log(item.name)

        var _this = this

        _this.selectValue = item.name

        _this.queryShop(item.name)
      },
      // 搜索药店获取焦点
      focusSelect() {

        // if (document.getElementsByClassName('el-autocomplete-suggestion')[0].style.display == "none") {
        //   document.getElementsByClassName('el-autocomplete-suggestion')[0].style.display = 'block';
        // }

      },
      // 搜索药店失去焦点
      blurSelect() {
        // setTimeout(function () {
        //   document.getElementsByClassName('el-autocomplete-suggestion')[0].style.display = 'none';
        // }, 100)
      },

      // 查询事件
      queryShop() {
        var _this = this;

        var result = []

        _this.resData.forEach(function (item, index) {
          if (item.name.includes(_this.selectValue)) {
            result.push(item)
          }
        })

        // 统计个数
        _this.countNum(result)

        // 加载搜索的点
        _this.showMarker(result)
      },

      // 图例 设置地图显示要素
      setMapFeatures() {
        var _this = this

        const checkboxElements = document.getElementsByClassName('mapStyle')
        const features = []
        for (var i = 0; i < checkboxElements.length; i++) {
          if (checkboxElements[i].checked == true) {
            features.push(checkboxElements[i].value)
          }
        }
        _this.mapObj.setFeatures(features)
      },

      // 统计个数
      countNum(data) {
        var _this = this

        _this.type0 = 0
        _this.type1 = 0
        _this.type2 = 0
        _this.type0Data = [];
        _this.type1Data = [];
        _this.type2Data = [];

        data.forEach(item => {
          if (item.type == 0) {
            _this.type0++;
            _this.type0Data.push(item);
          } else if (item.type == 1) {
            _this.type1++;
            _this.type1Data.push(item);
          } else if (item.type == 2) {
            _this.type2++;
            _this.type2Data.push(item);
          }
        })

      },

      //计算雷达圆内的数量
      circleCountNumFun(pos, radius) {


        var _this = this;
        // var radius = e.target.Je.radius;
        // var pos = [e.target.Je.center.Q, e.target.Je.center.P];

        //计算药店、三甲医院、普通医疗机构数量
        _this.type0 = 0;
        _this.type1 = 0;
        _this.type2 = 0;
        _this.type0Data = [];
        _this.type1Data = [];
        _this.type2Data = [];

        _this.resData.forEach(function (item, index) {

          var flag = _this.distanceFun(pos, item.pos, radius);

          if (flag) {

            if (item.type == 0) {
              _this.type0++;
              _this.type0Data.push(item);
            } else if (item.type == 1) {
              _this.type1++;
              _this.type1Data.push(item);
            } else if (item.type == 2) {
              _this.type2++;
              _this.type2Data.push(item);
            }

          }

        })

        //统计人口数据
        _this.Perpopu = 0;
        _this.Floatpopu = 0;

        _this.houseData.forEach(function (item, index) {

          var arr = [item.lng, item.lat];
          var flag = _this.distanceFun(pos, arr, radius);
          if (flag) {
            _this.Perpopu += item.Perpopu;
            _this.Floatpopu += item.Floatpopu;
          }

        })

      },

      // 年份
      yearFun() {
        var _this = this
        var nowYear = new Date().getFullYear()
        _this.yearValue = nowYear
        for (var i = nowYear; i > nowYear - 10; i--) {
          _this.yearOptions.push({value: i, label: i})
        }
      },

      // 打开弹窗
      openWindowEvent() {
        var _this = this
        var obj = document.getElementById('storeDetail')
        obj.addEventListener('click', function () {
          _this.outerVisible = true

          var storeid = obj.getAttribute('data-id')
          _this.resData.forEach(function (item) {
            if (item.id == storeid) {
              _this.getPagesInfo = item
              return false
            }
          })
        })
      },

      // 重置按钮
      refreshFun() {
        var _this = this
        _this.showMarker(_this.resData);
        _this.countNum(_this.resData);
        _this.placeArea("宁波市");

        _this.selectValue = ''
        _this.typeValue = 'all'
        _this.cityid = ''
        _this.streetname = ''

        //流动人口数量重置
        _this.Perpopu = 0;
        _this.Floatpopu = 0;
        _this.houseData.forEach(function (item, index) {
          _this.Perpopu += item.Perpopu;
          _this.Floatpopu += item.Floatpopu;
        })

      },

      // 区域函数
      areaDataFun() {
        var _this = this
        axios.get('../static/json/area.json').then((res) => {
          if (res.status == 200) {
            _this.cityData = res.data.districts[0].districts
          }
        })
      },
      // 查询区域
      searchArea(e) {
        var _this = this

        if (e == '') {
          _this.streetData = []
        } else {
          var streetData = _this.cityData.filter(function (city) {
            return city.adcode == e
          })
          _this.streetData = streetData[0].districts
        }

        // _this.addAreaMarker(streetData[0].center.split(','), streetData[0].name)

        //区域框定到县区
        if (e == "") {
          _this.placeArea("宁波市");
        } else {
          _this.placeArea(streetData[0].name);
        }

      },
      // 查询街道
      searchStreet(name) {
        var _this = this

        var streetData = _this.streetData.filter(function (street) {
          return street.name == name
        })
        _this.addAreaMarker(streetData[0].center.split(','), name)
      },
      // 添加选择行政区划的marker
      addAreaMarker(arr, name) {
        var _this = this;

        // 清空其他信息
        if (_this.infoWindow != null) {
          _this.infoWindow.close()
        }

        if (_this.circle != null) {
          _this.mapObj.remove(_this.circle)
        }
        if (_this.circleEditor != null) {
          _this.circleEditor.close()
        }

        if (_this.areaMarker != null) {
          _this.mapObj.remove(_this.areaMarker)
        }


        _this.areaMarker = new AMap.Marker({
          content: `<div><img width="13" height="17" src="//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png" alt=""></div>`,
          position: arr,
          offset: new AMap.Pixel(-13, -30)
        })
        _this.areaMarker.setLabel({
          offset: new AMap.Pixel(30, 30), // 设置文本标注偏移量
          content: "<div class='info'>" + name + '</div>', // 设置文本标注内容
          direction: 'right' // 设置文本标注方位
        })
        _this.areaMarker.setMap(_this.mapObj)
        _this.mapObj.setFitView([_this.areaMarker])
      },

      // 类别切换
      typeChange(typeValue) {
        var _this = this

        if (typeValue == 'all') {
          // 统计个数
          _this.countNum(_this.resData)

          // 加载搜索的点
          _this.showMarker(_this.resData)
        } else {
          var result = _this.resData.filter(function (item) {
            return item.type == typeValue
          })

          // 统计个数
          _this.countNum(result)

          // 加载搜索的点
          _this.showMarker(result)
        }
      },

      //查询地点
      searchPlace() {
        var _this = this;
        AMap.plugin(['AMap.Autocomplete', 'AMap.PlaceSearch'], function () {
          var autoOptions = {
            // 城市，默认全国
            city: "宁波",
            // 使用联想输入的input的id
            input: "searchPlace"
          }
          var autocomplete = new AMap.Autocomplete(autoOptions)

          var placeSearch = new AMap.PlaceSearch({
            city: '宁波',
            map: _this.mapObj
          })
          AMap.event.addListener(autocomplete, 'select', function (e) {
            _this.placeValue = e.poi.name;
            //TODO 针对选中的poi实现自己的功能
            placeSearch.setCity(e.poi.adcode);
            placeSearch.search(e.poi.name);

          })
        })
      },

      //测距函数
      distanceFun(arr1, arr2, dis) {
        var flag = false;
        var p1 = [121.41140100000001, 29.656963];
        var p2 = [121.411401, 29.656963];
        // 返回 p1 到 p2 间的地面距离，单位：米
        var dis2 = AMap.GeometryUtil.distance(arr1, arr2);

        if (dis2 < dis) {
          flag = true;
        } else {
          flag = false;
        }

        return flag;
      },

      //展示热力图
      showHeatMap() {

        var _this = this;

        if (_this.isHotPopu) {
          _this.mapObj.remove(_this.markers);

          _this.mapObj.plugin(["AMap.Heatmap"], function () {
            //初始化heatmap对象
            _this.heatmap = new AMap.Heatmap(_this.mapObj, {
              radius: 25, //给定半径
              opacity: [0, 0.8]
              /*,
              gradient:{
                  0.5: 'blue',
                  0.65: 'rgb(117,211,248)',
                  0.7: 'rgb(0, 255, 0)',
                  0.9: '#ffea00',
                  1.0: 'red'
              }
               */
            });
            //设置数据集：该数据为北京部分“公园”数据
            _this.heatmap.setDataSet({
              data: _this.heatmapData
            });
          });

          _this.heatmap.show()
        } else {
          _this.heatmap.hide()
          _this.refreshFun();
        }


      }

    }

  }

</script>

<style lang="scss" type="text/scss" scope>
  //年份select
  .year-btn {
    border: 1px solid #ced4da;
    border-radius: 0px;
    display: inline-block;
    width: 50px;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow: visible;
    text-transform: none;
    height: 36px;
    outline: none;
    vertical-align: top;
  }

  .year-select {
    width: 160px;
    margin-left: -3px;

    input {
      border-radius: 0;
      outline: none;
    }
  }

  .amap-info-close {
    position: absolute;
    right: 5px;
    _right: 12px;
    top: 5px;
    color: #c3c3c3;
    text-decoration: none;
    font: bold 16px/14px Tahoma, Verdana, sans-serif;
    width: 19px;
    height: 18px;
    text-align: center;
    line-height: 20px;
  }

  .el-vue-search-box-container {
    position: absolute !important;
    box-shadow: 4px 0px 13px 3px #999;
    height: 36px !important;
    line-height: 36px !important;
    top: 14px !important;
  }

  .search-btn {
    width: 70px !important;
    text-align: center;
    border-left: 1px solid #ddd;
    font-size: 14px;
  }

  .amap-text {
    background: #409eff;
    color: #fff;
  }

  .map-container,
  #map-container {
    position: relative;
    padding: 0px;
    min-height: calc(100vh - 50px);
    overflow-y: hidden;
  }

  .amap-demo {
    height: 100%;
  }

  .search-box {
    position: absolute;
    top: 25px;
    left: 20px;
  }

  .amap-page-container {
    position: relative;
    height: 600px;
    width: 100%;
  }

  .marker-window-wrap {
    width: 200px;
    /*height:150px;*/
    margin: -15px -18px 0px;

    .title {
      margin: -10px -18px 0px;
      padding: 5px 20px;
      border-bottom: 1px solid #ddd;
      background: #eeeeee;
      font-size: 13px;
      font-weight: bold;
    }

    .body {
      padding: 5px 0px;
      line-height: 18px;
      /*height: 100px;*/
    }
  }

  .window-bgimg {
    height: 100px;
    width: 100%;

    img {
      width: 100%;
      height: 100px;
    }
  }

  .other-info {
    margin-top: -5px;
    padding: 5px 10px;
    line-height: 18px;
    font-size: 13px;
  }

  //----------------------图例--------------
  .input-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border-radius: 0.25rem;
    width: 22rem;
    border-width: 0;
    border-radius: 0.4rem;
    /*box-shadow: 0 2px 6px 0 rgba(114, 124, 245, .5);*/
    box-shadow: 0 0px 6px 0 rgba(114, 124, 245, 0.9);
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 0.75rem 1.25rem;
  }

  .bottom-example {
    width: 150px;
    border-radius: 0px;
    background: #020409;
    padding: 4px 10px;
  }

  .bottom-example .input-item {
    height: 20px;
  }

  .bottom-example .input-item input {
    color: #00a7d2;
    vertical-align: middle;
  }

  .bottom-example .input-item .input-text {
    color: #00a7d2;
    padding-left: 3px;
    font-size: 12px;
  }

  .bottom-example .exampleList {
    margin-top: 4px;
    border-top: 1px solid #ddd;
  }

  .bottom-example .exampleList > div {
    position: relative;
  }

  .bottom-example .exampleList .exampleList-num {
    font-style: normal;
    position: absolute;
    right: 4px;
    color: #ffa000;
  }

  .bottom-example .exampleList div {
    display: flex;
    align-items: center;
    line-height: 20px;
    font-size: 12px;
  }

  .bottom-example .exampleList div img {
    width: 12px;
    height: 12px;
  }

  .bottom-example .exampleList div span {
    padding-left: 10px;
    color: #00a7d2;
  }

  .amap-toolbar {
    top: unset !important;
    bottom: 10px !important;
  }

  //----------------药店查询
  .shop-query {
    position: absolute;
    left: 10px;
    top: 10px;
    padding: 4px 4px;
    z-index: 10;
    font-size: 12px;
  }

  .shop-query .list-input {
    display: flex;
    margin-top: 8px;
  }

  .shop-query .list-input .query-input input {
    width: 160px;
    display: inline-block;
    background: #fff;
    border-radius: 0px;
    padding: 0.375rem 0.75rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    font-size: 12px;
  }

  .shop-query .list-input .query-shop {
    border: 1px solid #ced4da;
    border-radius: 0px;
    display: inline-block;
    width: 50px;
    margin-left: -1px;
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    overflow: visible;
    text-transform: none;
    cursor: pointer;
    height: 36px;
    outline: none;
  }

  .shop-query .list-input .query-shop:hover {
    opacity: 0.8;
  }

  //-------------信息窗口-----------
  .amap-info-content {
    padding: 0 !important;
    overflow: unset;
  }

  .amap-info-close {
    color: #fff;
    margin-right: -10px;
    font-size: 22px;
  }

  .window-style-open {
    overflow: hidden;
    background: #fff;
    width: 300px;
    box-shadow: 0 5px 15px #000;
    padding: 1px;
  }

  .window-style-open .box-img {
    width: 100%;
    height: 150px;
    background: #dddddd;
  }

  .window-style-open .box-img img {
    width: 100%;
    height: 150px;
  }

  .window-style-open .box-info {
    background: #0e932e;
    padding: 5px 10px;
    font-size: 12px;
  }

  .window-style-open .box-info .info-title {
    line-height: 18px;
    font-weight: bold;
    color: #fff;
  }

  .window-style-open .box-info .info-title span {
    font-size: 13px;
  }

  .window-style-open .box-info .info-title a {
    color: #6fa9da;
    cursor: pointer;
  }

  //-------------- 文字提示 ---------
  .amap-marker-label {
    border: 1px solid #ddd !important;
    margin-top: 4px;
    color: #000;
    font-size: 13px;
    border-radius: 5px;
    box-shadow: 2px 2px 10px;
    font-weight: bold;
    padding: 0px;
    position: relative;
    margin-top: 0px;
  }

  .amap-marker-label .title {
    padding: 4px 4px;
  }

  //行政区划
  .area-card {
    position: absolute;
    left: 1rem;
    right: 0;
  }

  //统计信息
  .street-info-wrap {
    position: absolute;
    width: calc(100% - 456px);
    bottom: 1rem;
    left: 284px;
    display: flex;
    color: #fff;

    .info-title {
      padding: 4px 10px;
      font-size: 14px;
      font-weight: bold;
    }

    .info-num {
      text-align: center;
      line-height: 36px;
      font-size: 16px;
    }

    .el-col-20 {
      width: 20%;
    }

    .el-row {
      margin-bottom: 20px;
      width: 100%;
      margin-left: 0 !important;
      margin-right: 0 !important;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .el-col {
      border-radius: 4px;
    }

    .bg-purple-dark {
      background: #99a9bf;
    }

    .bg-purple {
      background: #afb3b6;
    }

    .bg-purple-light {
      background: #e5e9f2;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 36px;
    }

    .row-bg {
      padding: 10px 0;
      background-color: #f9fafc;
    }
  }

  //详情弹窗
  .el-dialog__body {
    padding: 0;
  }

  //刷新
  .refresh-btn {
    position: fixed;
    right: 1rem;
    bottom: 157px;
  }

  .info {
    min-width: auto;
  }

  .year-box {
    margin-top: 8px;
  }
</style>
